<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>10_固定定位全屏遮罩</title>
    <style>
        .mask {
            background-color: rgba(0, 0, 0, 0.4);
            /* 使用固定定位,以HTML为参照物,紧贴四个边,就能实现撑满全屏的效果 */
            position: fixed;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
        }
    </style>
</head>
<body>
<div class="mask"></div>
<div>
    lorem*60 Tab补齐
    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius laudantium quidem temporibus voluptatem
        voluptatibus? Cum, cupiditate, dolorum facilis illum incidunt iusto libero nisi obcaecati provident quos sit,
        veritatis vitae voluptatibus.
    </div>
    <div>Atque aut, consectetur facilis ipsa libero mollitia nihil obcaecati praesentium quia repellat. Asperiores
        exercitationem ipsam mollitia nulla optio vitae! Consequuntur deserunt dolore id nobis omnis praesentium quos
        reiciendis suscipit voluptate!
    </div>
    <div>Cupiditate fugiat nobis non porro quasi recusandae sunt veniam. Atque deleniti nam quam! Accusantium, amet at
        commodi delectus deserunt dignissimos dolorum ex in ipsam magnam neque omnis quasi, quod tempora?
    </div>
    <div>Accusantium aliquam beatae corporis distinctio enim error labore magni neque odit officiis possimus qui,
        reiciendis repellendus sapiente sequi suscipit tempora tempore veniam voluptate voluptatibus! Inventore nulla
        odit quisquam tenetur veniam!
    </div>
    <div>Aliquid amet beatae corporis dolore eaque eius excepturi minus molestiae, molestias, necessitatibus nisi
        pariatur quae qui quis quo repellendus sed sequi sint sunt temporibus totam unde velit? Ea, est, mollitia?
    </div>
    <div>Autem consequatur ipsum nulla quaerat quibusdam quis similique tempora. Architecto consectetur delectus
        deserunt dignissimos, doloribus, ea eius ipsam ipsum, quam quisquam veritatis voluptate voluptatem? Accusantium
        dolorem enim nemo quasi similique.
    </div>
    <div>A ad commodi laborum vitae voluptates? Alias assumenda dolorem doloribus eveniet exercitationem illo in, ipsa
        modi molestiae nulla officiis qui quis repudiandae veniam veritatis. Consequatur doloribus eaque minus nulla
        quia.
    </div>
    <div>Exercitationem facilis repudiandae sed ullam vero. Animi culpa ducimus ipsa ipsam itaque nobis, reprehenderit
        sed suscipit vel! Accusamus, animi consectetur cum delectus dignissimos dolor dolorum eligendi excepturi
        inventore modi repellat!
    </div>
    <div>Aliquid at consequatur corporis culpa, debitis et fugiat hic iste libero quis ratione sit veritatis? Alias
        consequatur consequuntur dolorem eaque, esse facilis id impedit inventore modi nisi repudiandae rerum sapiente.
    </div>
    <div>Beatae dolor eligendi labore laborum obcaecati officia optio, qui quos soluta tenetur. Aliquam iure molestiae
        natus quisquam sunt. Adipisci consequatur doloremque dolores esse, placeat porro quia repellat similique sit
        ullam.
    </div>
    <div>Cumque eveniet exercitationem expedita magni mollitia nostrum omnis pariatur rem vel voluptas. Ab incidunt
        iusto quaerat. Commodi dolor eligendi error est incidunt ipsum, iste nobis nostrum odio repellendus? Aperiam,
        sequi?
    </div>
    <div>Ab atque commodi consequuntur, debitis dignissimos dolor dolore eaque eius esse ex expedita fuga id labore
        maiores nam nemo officia perspiciatis quae quisquam ratione sapiente, suscipit, tempora ut. Alias, quidem.
    </div>
    <div>Beatae cupiditate dicta doloribus incidunt nobis officiis quas quia reprehenderit suscipit voluptatum? Deserunt
        distinctio labore obcaecati quod sapiente vero voluptas? Cum, cumque eius facere fugiat non numquam provident
        sequi ullam.
    </div>
    <div>Deserunt eos est, expedita harum mollitia provident repudiandae tenetur vitae? Assumenda eligendi et nisi
        quisquam voluptatum. Aspernatur cum esse eum eveniet fugiat harum perferendis perspiciatis quasi reprehenderit
        saepe? Delectus, et.
    </div>
    <div>Aliquid architecto assumenda aut cumque dolores, ea hic id illo impedit, ipsum minima minus molestias nesciunt,
        officia omnis optio porro qui quia quidem vero? Consequuntur dolore esse porro rerum voluptatum.
    </div>
    <div>Accusantium consequuntur deleniti esse excepturi nam perspiciatis, quia sequi unde? Dignissimos id nobis nulla
        odio quidem sapiente suscipit ut veritatis. Aut cumque eius harum ipsam magni quae quos totam voluptatum.
    </div>
    <div>Aspernatur delectus deserunt dicta, dolor dolorem ducimus esse exercitationem inventore iure minima minus modi
        officia officiis quidem rem sapiente tempora unde, voluptates. Aut expedita iste modi officia, reprehenderit
        sapiente vero?
    </div>
    <div>Adipisci amet aut dolorem quis ut! Alias dignissimos dolor eveniet in natus officia optio quisquam, repellat
        repellendus saepe suscipit tempora, unde, veniam. Aliquam dolor ipsum laboriosam magnam nobis quas rerum.
    </div>
    <div>Assumenda, laboriosam, quod. Alias corporis illum in ipsam natus nihil obcaecati perspiciatis quis, rem sunt?
        Asperiores deserunt, dolor dolorum ducimus error et neque perferendis quia repudiandae rerum totam ullam, ut?
    </div>
    <div>Alias asperiores aut consequuntur cupiditate delectus doloribus eaque enim eos est, harum hic inventore, ipsam
        laborum minima mollitia nostrum pariatur perferendis quam qui quibusdam quo quod rem tenetur ut voluptate?
    </div>
    <div>Aliquam amet eligendi error, exercitationem impedit ipsum magni, maiores maxime molestias natus neque numquam,
        porro recusandae soluta velit. Accusamus at commodi cum maiores necessitatibus nesciunt non obcaecati, quasi
        saepe vel?
    </div>
    <div>Illum ipsam laboriosam nam neque obcaecati quae qui quisquam sunt unde voluptas. Aliquam commodi consectetur
        cupiditate earum eius iure nobis provident rem similique. Amet doloribus enim, pariatur possimus totam vitae.
    </div>
    <div>Debitis dolorem, ex facilis minus neque repellat rerum similique! Aliquid asperiores aspernatur at commodi,
        doloribus eius eos fuga in minus nesciunt officiis perferendis sequi similique, sint tempora velit veritatis
        voluptate.
    </div>
    <div>Ad alias animi consectetur corporis dolorum fugit, ipsam minima molestiae mollitia nulla placeat porro quis
        reiciendis, repudiandae tempora unde vitae. At magnam nemo quaerat sit, vel vero. Aliquid, amet doloremque.
    </div>
    <div>Earum, et nobis praesentium quisquam sit ut voluptas. Aspernatur, at earum eos facilis fugit ipsum molestiae
        mollitia nam natus officiis perspiciatis porro quaerat quam quia quis, sapiente sed similique vitae?
    </div>
    <div>Aliquam animi deserunt ducimus esse ex fugiat id maiores modi nostrum nulla obcaecati officia pariatur, placeat
        praesentium quaerat quo sint, tempora veritatis. Commodi doloribus, expedita hic illum nostrum possimus sequi!
    </div>
    <div>Ad culpa eos eveniet excepturi explicabo id illo illum impedit ipsa ipsam ipsum, iure labore modi nam natus
        necessitatibus nesciunt non numquam officia possimus quas quod veritatis vero vitae voluptas!
    </div>
    <div>A ad aspernatur aut blanditiis consequatur cum, cupiditate ea eligendi eos est excepturi harum mollitia,
        nesciunt obcaecati pariatur perferendis quae qui quibusdam quo ratione recusandae repudiandae, sed similique
        sint voluptate?
    </div>
    <div>Amet, ex saepe? Consectetur cum deleniti illum possimus. Animi aperiam aut consectetur consequuntur, culpa,
        enim id libero magni maxime nisi odit provident quae quia quo soluta? Dolore doloremque eveniet explicabo.
    </div>
    <div>Dolorum labore minus neque nesciunt nobis, obcaecati odio quas repellat, repellendus suscipit velit,
        voluptatum! Architecto commodi consectetur deleniti ducimus earum, fuga nostrum provident quam quod reiciendis
        soluta suscipit velit voluptas.
    </div>
    <div>Ad aut blanditiis expedita magni maxime numquam omnis repellat sint veniam? Consequatur eos fuga id inventore
        ipsam laudantium libero mollitia, placeat quasi quibusdam quidem ullam voluptas voluptate voluptates
        voluptatibus voluptatum!
    </div>
    <div>Adipisci doloremque eum harum, magnam maxime perferendis recusandae rerum suscipit totam velit? Ab, aliquid at
        dignissimos eius ex exercitationem facere, hic iure iusto nisi, nobis quo unde veritatis vero vitae!
    </div>
    <div>Blanditiis consectetur, delectus laboriosam magnam pariatur perferendis tempora vitae voluptatum. Commodi
        corporis culpa dolorem, eum inventore ipsa maiores nam nobis quas quod rerum sed sunt voluptatum. Culpa eos iure
        placeat.
    </div>
    <div>Consequatur eum labore numquam rem voluptas voluptates! Ab alias asperiores delectus dolor dolore enim
        excepturi fugit harum in laboriosam maxime odit quidem rerum, sed voluptas. Explicabo labore quis similique
        vitae?
    </div>
    <div>Aperiam ex hic iste, nam perspiciatis repudiandae sunt? Distinctio dolore doloremque doloribus, ducimus eaque
        error, exercitationem facilis, inventore maiores nostrum optio quas quisquam quod tenetur veniam. Accusamus
        dicta molestiae veritatis?
    </div>
    <div>Accusantium amet deserunt dicta dolore ea facere id, itaque, maiores nesciunt nihil nisi numquam obcaecati odit
        optio quas, quos repellat suscipit voluptate. Odio officia perspiciatis quisquam quod sapiente! Itaque, nulla.
    </div>
    <div>Dicta dolorum impedit quis ratione reprehenderit! Accusamus architecto dolorem ea eaque ex exercitationem
        fugiat, id iusto labore nihil qui, quo sapiente, vel. Atque deleniti harum ipsa nam natus, necessitatibus sit!
    </div>
    <div>Aperiam eum ex sint sit vero? Aliquam amet at culpa ea, ex fugiat, fugit, ipsum molestiae mollitia
        necessitatibus nisi odio perferendis perspiciatis quam reprehenderit repudiandae voluptatem. Consectetur
        praesentium quidem quod.
    </div>
    <div>Atque quia ut veritatis. Aspernatur commodi corporis illo, iure laboriosam magnam magni molestias quasi
        repellat sapiente temporibus voluptates? Consequuntur cumque deleniti dolore eius inventore, labore omnis
        quaerat suscipit tempora vero?
    </div>
    <div>Cum dicta facere facilis hic laborum quibusdam unde. Beatae dicta impedit laborum minima mollitia, officiis
        perferendis placeat quis unde veniam. Eius enim error explicabo facere hic id, obcaecati saepe velit.
    </div>
    <div>Autem doloribus earum minus officiis sit tempora, ut veritatis. Aperiam deleniti dolorem doloribus eos eum fuga
        magnam molestiae nesciunt nihil nulla provident quod repudiandae tempora tempore, vitae. Exercitationem,
        obcaecati vitae.
    </div>
    <div>Animi doloremque eius fugiat magni minima modi nemo nihil optio suscipit totam? Assumenda cumque est explicabo
        impedit nesciunt provident quidem similique vitae! Earum quo quod repellendus? Consequatur est facere
        recusandae.
    </div>
    <div>Cum ducimus iste maiores necessitatibus officiis quaerat sed totam. Amet commodi debitis doloribus dolorum eius
        eum, fugiat incidunt omnis, porro quidem rerum similique temporibus. Maxime minus nostrum perferendis
        repudiandae voluptatum.
    </div>
    <div>Aliquam, animi at, atque beatae blanditiis consequatur debitis deserunt dolorum ea eos error eveniet ex harum
        iste maiores natus odit officiis quas quasi qui reprehenderit rerum saepe similique sint voluptatum!
    </div>
    <div>Autem cupiditate doloribus earum exercitationem expedita ipsa ipsam, itaque nesciunt quidem repellat sequi
        similique? Consequuntur corporis culpa enim inventore magnam nulla numquam obcaecati similique ut velit. Error
        ipsa odit ratione?
    </div>
    <div>Dicta dolorum ea earum incidunt, natus quasi quisquam repudiandae soluta. Asperiores consectetur dicta
        doloribus ducimus eum facilis id illum maiores molestiae necessitatibus numquam omnis optio, quasi suscipit
        tempore vero voluptate?
    </div>
    <div>Delectus ex, harum hic id itaque labore molestias non nostrum qui quia quis similique vel velit. Consectetur
        cupiditate facilis, hic laborum, libero nam odit, officia porro reiciendis rem velit voluptate.
    </div>
    <div>Aspernatur consequuntur dignissimos distinctio dolorum enim eveniet maxime minus modi, officia, placeat
        provident similique totam, veniam? Explicabo fugit ipsum nobis nostrum numquam. Ad assumenda deleniti
        dignissimos, iure nam reiciendis sed.
    </div>
    <div>Amet assumenda at atque dicta, dolore dolorem, doloribus ipsam mollitia nihil obcaecati odit perspiciatis
        repudiandae sunt suscipit tempora veritatis voluptas! Corporis cupiditate deserunt dolores eligendi nobis
        numquam officia quae rem.
    </div>
    <div>Dolor ipsum ratione repudiandae sit ullam. Adipisci consequuntur cupiditate delectus dolorum eius esse incidunt
        iure, minima minus nihil nulla odit officiis perspiciatis quidem quisquam reiciendis sapiente tempore totam ut
        vel.
    </div>
    <div>A, ab consequatur delectus dolorum expedita fugiat illum nihil ratione sapiente. Aliquid architecto asperiores,
        consequatur dolore earum eius enim ipsam maiores natus necessitatibus placeat quam qui quos, reprehenderit unde
        voluptates?
    </div>
    <div>Accusamus adipisci, amet cumque eligendi minus nemo obcaecati provident quae quasi sed suscipit velit
        voluptatem? Ad alias amet excepturi facilis, illum iusto maiores molestias natus nesciunt officia quas quisquam
        saepe!
    </div>
    <div>Architecto commodi ea, earum est eum eveniet ex fuga illum inventore, iusto magnam magni maiores minima
        molestias nisi omnis quas quis reprehenderit sit tempore tenetur vel, voluptatum! Ad eveniet, suscipit.
    </div>
    <div>A ad aspernatur consequuntur incidunt iusto reiciendis saepe sunt! Earum eligendi eveniet labore, quae repellat
        repellendus repudiandae voluptate voluptatibus voluptatum. Consequuntur ea earum fuga ipsa nam repudiandae saepe
        velit voluptas!
    </div>
    <div>Accusamus atque commodi consequuntur exercitationem fuga ipsum iure iusto libero mollitia nam nesciunt
        obcaecati omnis, possimus quae reiciendis rem reprehenderit tempore temporibus, ut voluptas. Culpa cumque
        inventore odit pariatur quas.
    </div>
    <div>Ad asperiores consectetur dicta dolorem earum eius est, facilis illum ipsum natus nesciunt nihil odio quia,
        quis sed soluta totam vero voluptates voluptatibus voluptatum. Facere nam nisi non quasi quos.
    </div>
    <div>Cum magni saepe velit? Alias aliquid dolores eius eos expedita harum id ipsam ipsum itaque iusto maxime numquam
        officiis provident quam quas quasi ratione repellendus rerum, sunt suscipit veritatis vero.
    </div>
    <div>Architecto at autem corporis delectus dignissimos ea eum hic nemo obcaecati omnis, quasi quod reiciendis
        repellendus, suscipit voluptatem? Aspernatur deserunt, dolores eum eveniet excepturi fugit incidunt ipsam
        maiores molestias officiis.
    </div>
    <div>Adipisci cupiditate et ipsam iure pariatur placeat totam voluptates! Minus, tempora, vitae! Aliquam aliquid
        amet animi asperiores blanditiis consequuntur delectus earum explicabo labore, maiores maxime officia quae, quas
        rerum sit!
    </div>
    <div>Cupiditate dignissimos fuga laboriosam maxime, minima officiis ratione rerum? Aut consequuntur culpa dolore ea
        laudantium libero porro praesentium, repellat sit tempora? Eius iure officiis quaerat similique suscipit
        tempore, vel? Dicta.
    </div>
</div>
</body>
</html>